<template>
	<view class="content-box">
		<view class="hint" v-if="!type">
			12小时内至少上传一次
		</view>
		<view class="place-box" @click="getLocation">
			<view class="" style="display: flex;align-items: center;">
				<image src="/static/location.png" mode=""></image>
				<view class="">
					当前定位：
				</view>
			</view>

			<view class="" style="width: calc(100vw - 200rpx);">
				{{fullAddress||'定位中'}}
			</view>
		</view>
		<view class="title">
			请上传投食喂水视频（必填）
		</view>
		<image style="margin: 30rpx 20rpx;width: 400rpx;" :src="$imageUrl(videoObj.cover)||'/static/order/video_.png'"
			mode="widthFix" @click="setVideo()">
		</image>
		<view class="title">
			请上传投食喂水照片（选填）
		</view>
		<view class="vehicle-photo">
			<image style="margin: 30rpx 20rpx;width: 400rpx;" :src="$imageUrl(images)||'/static/order/image_.png'"
				mode="widthFix" @click="setImg('images')">
			</image>
		</view>
		<view class="title">
			填写投食喂水备注（选填）
		</view>
		<view class="textarea">
			<u--textarea v-model="remark" placeholder="请输入内容" count></u--textarea>
		</view>
		<view class="tag-box">
			<view class="tag-item" :class="{'active-item':item.active}" v-for="(item, index) in typeList"
				@click="setActive(item)">
				{{item.content}}
			</view>
		</view>
		<view class="btn" @click="submit">
			提交
		</view>
		<u-calendar :show="show" @confirm="confirm"></u-calendar>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				expectDistributionTime: '',
				typeList: [],
				remark: '',
				videoObj: {
					cover: '',
					url: ''
				},
				images: '',
				show: false,
				type: '',

				addressLat: '',
				addressLng: '',
				fullAddress: ''
			}
		},
		onLoad(e) {
			this.type = e.type
			this.id = e.id
			this.$myRequest('/api/driver/order/v1/list/label', {
				type: 2
			}).then(res => {
				let data = res.data || []
				data.forEach(item => {
					item.active = false
				})
				this.typeList = data
			})
			this.getLocation()
		},
		methods: {
			getLocation() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log(res)
						that.addressLng = res.longitude
						that.addressLat = res.latitude
						uni.request({
							url: 'https://restapi.amap.com/v3/geocode/regeo',
							data: {
								key: 'a1b1763664b900d6f3a61dd992973dbf',
								location: `${res.longitude},${res.latitude}`
							},
							success(res) {
								console.log(res, res.data.regeocode.formatted_address)
								that.fullAddress = res.data.regeocode.formatted_address
							},
							
						})


					},
					fail() {
						uni.showModal({
							title: '提示',
							content: '获取位置失败，请打开定位',
							showCancel: false,
							success: function(res) {
					
								uni.switchTab({
									url: '/pages/order/order'
								})
					
							}
						});
					}
				});
			},
			setVideo() {
				let that = this
				uni.chooseMedia({
					count: 1, //默认9
					mediaType: ['video'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择
					success: function(res) {
						that.$uploadFiles({
							filePath: res.tempFiles[0].tempFilePath,
							formData: {
								type: 1
							}
						}).then(videoData => {
							that.videoObj.url = videoData.data
							that.$uploadFiles({
								filePath: res.tempFiles[0].thumbTempFilePath,
								formData: {
									type: 1
								}
							}).then(imgData => {
								that.videoObj.cover = imgData.data
							})
						})

					}
				});
			},
			setImg(name) {
				let that = this
				uni.chooseMedia({
					count: 1, //默认9
					mediaType: ['image'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择
					success: function(res) {
						console.log(that);
						that.$uploadFiles({
							filePath: res.tempFiles[0].tempFilePath,
							formData: {
								type: 1
							}
						}).then(res => {
							that[name] = res.data
							console.log(res.data)
						})
					}
				});
			},
			setActive(item) {
				item.active = !item.active
			},
			confirm(e) {
				this.expectDistributionTime = e[0]
				this.show = false
			},
			submit() {
				let data = {
					orderId: this.id,
					images: this.images,
					remark: this.remark,
					addressLng: this.addressLng,
					addressLat: this.addressLat,
					fullAddress: this.fullAddress,
					videoInfoList: [this.videoObj]

				}
				let labelId = []
				this.typeList.forEach(item => {
					if (item.active) labelId.push(item.id)
				})
				data.labelId = labelId
				let url = '/api/driver/order/v1/feed/pet'
				let message = '上传成功'
				if (this.type) {
					url = '/api/driver/order/v1/delivery'
					message = '宠物已交付！'
				}
				this.$myRequest(url, data, 'POST').then(res => {
					this.$refs.uToast.show({
						message,
						complete() {
							uni.navigateBack({
								delta: 1
							})
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.content-box {
		padding-bottom: 200rpx;
		.hint {
			height: 64rpx;
			background: linear-gradient(129deg, #FFFFFF 0%, #FFFAD6 49%, #FFFFFF 100%);
			font-size: 24rpx;
			text-align: center;
			line-height: 64rpx;
			color: #FF9472;
		}

		.place-box {
			display: flex;
			justify-content: center;

			font-size: 28rpx;
			color: #333333;
			padding: 20rpx 0;
			padding-bottom: 50rpx;

			image {
				width: 20rpx;
				height: 30rpx;
				margin-right: 8rpx;
			}
		}

		.title {
			font-size: 28rpx;
			color: #333333;
			font-weight: 700;
			position: relative;
			padding-left: 20rpx;

			&:before {
				content: '';
				width: 12rpx;
				height: 24rpx;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background: $theme-color;
			}
		}

		.textarea {
			margin: 20rpx;
			border: 2rpx solid #D6D6D6;
			border-radius: 20rpx;
			overflow: hidden;
		}

		.tag-box {
			display: flex;
			flex-wrap: wrap;

			.tag-item {
				padding: 12rpx 36rpx;
				background-color: rgba(203, 203, 203, 0.20);
				border-radius: 10rpx;
				border: 2rpx solid #CBCBCB;
				font-size: 28rpx;
				color: #999999;
				margin-left: 20rpx;
			}

			.active-item {
				background-color: rgba(254, 175, 172, 0.20);
				border: 2rpx solid #FEAFAC;
				color: #FEAFAC;
			}
		}

		.btn {
			width: 338rpx;
			height: 80rpx;
			background: #FFCE4E;
			border-radius: 40rpx;
			font-size: 28rpx;
			line-height: 80rpx;
			color: #FFFFFF;
			margin: 84rpx auto 60rpx auto;
			text-align: center;
		}
	}
</style>